<template>
 <lay-layout class="Pop">

  <lay-body class="flexrow">
    <div class="w10"></div>
    <lay-field class="left" >
      <template #title>
      <span style="font-size: 16px !important;">基本信息</span>
    </template>    
  <lay-form :model="model" ref="layFormRef" class="MainForm" >   
    <lay-form-item label="页面代码" prop="Code" required >
            <lay-input v-model="model.Code"></lay-input>
          </lay-form-item>
<lay-form-item label="页面名称" prop="Name" required>
            <lay-input v-model="model.Name"></lay-input>
          </lay-form-item>
<lay-form-item label="图标" prop="ImgUrl" >
    <lay-icon-picker v-model="model.ImgUrl" type="layui-icon-face-smile" page></lay-icon-picker>
          
          </lay-form-item>
<lay-form-item label="类型" prop="LX" >
            <lay-input v-model="model.LX"></lay-input>
          </lay-form-item>
<lay-form-item label="备注" prop="Memo" >
            <lay-input v-model="model.Memo"></lay-input>
          </lay-form-item>
<lay-form-item label="参数1" prop="P1" >
            <lay-input v-model="model.P1"></lay-input>
          </lay-form-item>
<lay-form-item label="参数2" prop="P2" >
            <lay-input v-model="model.P2"></lay-input>
          </lay-form-item>
<lay-form-item label="参数3" prop="P3" >
            <lay-input v-model="model.P3"></lay-input>
          </lay-form-item>
<lay-form-item label="参数4" prop="P4" >
            <lay-input v-model="model.P4"></lay-input>
          </lay-form-item>


  </lay-form>
    
</lay-field>
<div class="w10"></div>
<lay-field   class="right" >
      <template #title>
      <span style="font-size: 16px !important;">授权信息</span>
    </template>   
    
    <lay-form-item label=""     >
            <lay-button size="sm" type="primary" 
            @click="addAuth">添加授权</lay-button>
        </lay-form-item>
    <lay-form   v-for="(item, index) in model.Auths" :key="index" >
       

        <div class="Item" @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)">
          <lay-form-item label="授权代码" prop="item.Code"   >
              <lay-input v-model="item.Code" disabled></lay-input>
            </lay-form-item>

            <lay-form-item label="授权名称" prop="item.Name"   >
              <lay-input v-model="item.Name" disabled></lay-input>
            </lay-form-item> 

            <lay-form-item label="Urls" prop="item.Urls"   >
              <lay-textarea  v-model="item.Urls" disabled></lay-textarea>
            </lay-form-item> 

            <lay-form-item label=""   style="margin-bottom:0px;height:20px;"  >
              <lay-icon type="layui-icon-edit"  
              style="cursor:pointer;" 
              v-show="item.Id==mouseoverId"
              @click="editAuth(item)"
              
                ></lay-icon>  
              <lay-icon type="layui-icon-close" 
              style="cursor:pointer;margin-left:10px;" 
              v-show="item.Id==mouseoverId"
              @click="deleteAuth(item)"
               ></lay-icon>   
            </lay-form-item> 
        </div>
      </lay-form>
       

</lay-field>    
<div class="w10"></div>
    </lay-body>
    <lay-footer>
     
      <lay-button size="sm" type="primary" @click="toSubmit"
            >保存</lay-button
          >
          <lay-button size="sm" @click="toCancel" style="margin-left:40px;">取消</lay-button>
    </lay-footer>
  </lay-layout>

</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";  
import MyWin from "../../library/MyWin"; 
import MyPage from "../../library/MyPage"; 
import {MyExcel} from "../../library/MyExcel"; 
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport"; 
import MyData from "../../library/MyData"; 
import add from "./addauth.vue";  

export default {
  props:{
      data:Object,
      isAdd:Boolean
  },

  setup(prop:any, context:any) {
    const baseUrl="/htpage";
    const myWin=ref<any>(null);
    const model = reactive<any>(prop.data )
    const layFormRef = ref<any>()
    const toSubmit=async()=>{
      layFormRef.value.validate((isValidate:boolean, model:any, errors:Array<any>) => {
          if(!isValidate){
            let msg='';
            errors.forEach(element=>{ 
              msg+=`${element.message}
              `; 
            })
            
            MyWin.alert(msg,{});
            return;
          }
          save();
      });
    } 
    const toCancel=()=>{ 
      context.emit("cancel");  
      myWin.value.close();
    }
    const save=async()=>{
      let url=baseUrl+"/Insert";
      if(!prop.isAdd){
        url=baseUrl+"/update";
      }
      var r=await new MyHttp().post(url,model,
        { 
        }
      ); 
      context.emit("ok",model); 
      myWin.value.close();  
    }

 
    const mouseoverId=ref<any>();
    const mouseenter=(data:any)=>{
      mouseoverId.value=data.Id;
      
    }
    const mouseleave=(data:any)=>{
      // mouseoverId.value="" ;
    }
    const deleteAuth=(data:any)=>
    {
       MyData.removeDataById(model.Auths,data.Id);
    }
    const addAuth=async()=>{
      var r=await new MyHttp().post(baseUrl+"/InsertAuthInit",{},
        { 
        }
      ); 
      var m=r.data;
      m.SortNo=model.Auths.length*10+10;
      var opt={
          title: '新增授权',
          content: h( add, 
            {  
             data:m,
             onOk:(data:any)=>{
                MyData.addData(model.Auths,data); 
                myWin.value.close();
             }  
            }
            ), 
          area: ['500px','600px'] 
        }; 
        myWin.value.open(opt ); 
    }

     
    const editAuth=(data:any)=>{
      var m=data; 
      var opt={
          title: '修改授权',
          content: h( add, 
            {  
             data:m,
             onOk:(data:any)=>{
                myWin.value.close();
             } 
            }
            ), 
          area: ['500px','600px'] 
        }; 
        let oid=myWin.value.open(opt ); 
         
    }
    onMounted(() =>{  
      myWin.value=new MyWin();
    });
    return {
      model,
      layFormRef,
      toSubmit,
      toCancel,

      
      mouseoverId,
      mouseenter,
      mouseleave,

      deleteAuth,
      addAuth,
      editAuth

    }
  }
}
</script>
<style scoped>
.Pop .layui-footer,
.Pop .layui-header {
  height: 50px;
  text-align: center; 
  padding-top:10px;
}  
.Pop .layui-body{
  justify-content:start;
}
.MainForm{
  margin: 0px;
  width:100%;
} 
.left 
{ 
  width: 400px;
}
.right{
  
  flex:1;
  
}
.w10{
  width:10px;
}
.right .TBMain{
  width:380px;
}
.right .layui-form-label{
  width:60px;
}
.right .layui-form-item{
  margin-bottom: 5px;
}

 
.Item{
  border-bottom:1px dashed var(--global-neutral-color-5) ;
  margin-top:10px;
}
.Item:hover  {
  box-shadow: 2px 2px 14px #ccc;
  cursor: pointer;
}
.Item:hover i{
  display: inline;
}
</style>